<template>
  <view class="page_content" style="position: relative">
    <view style="padding: 0 20rpx;background-color: white;display: flex;align-items: center;justify-content: center;;height: 88rpx;font-size: 26rpx;position: sticky;top: 0;right: 0;width: 750rpx;z-index: 999">
      <view class="u-flex" style="flex: 1;justify-content: center" @click="selectDate(1)">
        开始：<view style="color: #999999;width: 168rpx;background-color: #F6F6F6;padding: 10rpx 0 10rpx 16rpx;border-radius: 10rpx">{{start_time?start_time:'请选择日期'}}</view>
      </view>
      <view class="u-flex" style="flex: 1;justify-content: center"  @click="selectDate(2)">
        结束：<view style="color: #999999;width: 168rpx;background-color: #F6F6F6;padding: 10rpx 0 10rpx 16rpx;border-radius: 10rpx">{{ end_time ? end_time : '请选择日期'}}</view>
      </view>
      <view style="margin-left: 10rpx;padding: 6rpx 0;width: 108rpx;text-align: center;border-radius: 38rpx;border: 1rpx solid #e2e2e2;" @click="getShopList()">确定</view>
    </view>
    <u-picker mode="time" v-model="show" :params="params" :default-time="getDate()" safe-area-inset-bottom start-year="2025" end-year="2030" @confirm="confirmTime"></u-picker>
		<home-orderlist ref="" :orderList="shopsLists"></home-orderlist>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				pageSize: 1,
				orderStatus: 5,
				shopsLists: [],
        show: false,
        defaultTime: "",
        params: {
          year: true,
          month: true,
          day: true,
        },
        start_time: "",
        end_time: "",
        type: 1,
			}
		},
		onLoad() {
			let that = this
			let token = uni.getStorageSync('token')
			if (!token) {
				
			} else {
				that.GetUserInfo()
				that.GetOrderList()
			}
      that.getDate()
		},
		//下拉刷新
		onPullDownRefresh() {
			let that = this
			that.shopsLists = []
			that.pageSize = 1
			setTimeout(function() {
				that.GetOrderList()
				uni.stopPullDownRefresh();
			}, 1500);
		},
		//触底加载
		onReachBottom() {
			let that = this
			setTimeout(function() {
				that.pageSize++;
				that.GetOrderList()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		methods: {
      getShopList() {
        if((this.start_time == "") || (this.end_time == "")){
          uni.showToast({
            title: '请选择开始时间和结束时间',
            icon: 'none'
          })
          return
        }
        uni.startPullDownRefresh();
      },
      selectDate(type) {
        this.show = true
        this.type = type
      },
      confirmTime(e){
        if(this.type == 1){
          this.start_time =e.year + '-' +e.month + '-' +e.day
        }else{
          this.end_time =e.year + '-' +e.month + '-' +e.day
        }

      },
      getDate() {
        const now = new Date();
        // console.log(now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate())
        return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
      },
			GetOrderList(){
        if((this.start_time == "" && this.end_time) || (this.start_time && this.end_time == "")){
          uni.showToast({
            title: '请选择开始时间和结束时间',
            icon: 'none'
          })
          return
        }
				let that = this
				that.$u.post('/shop/order/lists', {
					page: that.pageSize, //分页页码，数字类型
					limit: 10, //每页条数 默认10
					shop_id: '', //店铺ID
					status: that.orderStatus, //订单状态 默认全部 不传 3已核验（核验明细）， 4查看笔记
          start_date: that.start_time, //开始时间
          end_date: that.end_time, //结束时间
				}).then(res => {
					console.log('订单列表', res);
					if (that.pageSize != 1) {
						if (res.result.length != 0) {
							that.shopsLists = that.shopsLists.concat(res.result)
						} else {
							
						}
					} else {
						that.shopsLists = res.result
					}
				}).catch(err => {
				
				});
			},
			GetUserInfo() {
				let that = this
				that.$u.post('/shop/user/info', {

				}).then(res => {
					console.log('账号信息', res)
					uni.setStorageSync('userinfo', res.result)
				}).catch(err => {

				});
			},
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>

<style lang="scss">
	page {}
	
	/* /deep/  */
  .jianbian {
		background-image: linear-gradient(to top, #F4F4F4, #F4F4F4) !important;
	}

	.top_wrap {
		position: relative;
		padding: 200rpx 0 0 0;
		overflow: hidden;

		.topbg {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			margin: 0 auto;
			width: 100%;
		}

		.top_info {
			position: relative;
			z-index: 2;
			align-items: center;
			justify-content: space-between;
			background-color: rgba(255, 255, 255, 0.62);
			padding: 14rpx 24rpx;
			border-radius: 200rpx;
			width: 92%;
			margin: 0 auto;

			.allshop {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.allshopright {}
		}

		.san_btn_wrap {
			padding: 68rpx 100rpx;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 2;

			.san_btn_item {
				text-align: center;

				image {
					width: 90rpx;
					height: 90rpx;
					background-color: #fff;
					border-radius: 14rpx;
					padding: 10rpx;
				}

				view {
					margin-top: 12rpx;
					font-weight: 500;
				}
			}
		}

		.tabbas_box {
			position: relative;
			z-index: 2;
			background-color: #ffffff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 20rpx 0 0 0;

			.hkbox {
				width: 60%;
				margin: 0 auto;
				text-align: center;
			}
		}
	}

	.nav_bar {
		padding: 30rpx;

		.address {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
	}
</style>